<template>
  <div class="rating_page" style="
    position: absolute;
    top: 0px;
    width: 100%;
    ">
        <section>
            <x-header :left-options="{backText: ''}"><span style="color:#000">口味偏好</span></x-header>
            <section class="quick_remark" v-if="remarkList.remarks.length">
                <header class="header_style">快速备注</header>
                <ul class="remark_arr_list_ul">
                    <li class="remark_arr_list_li" v-for="(item,index) in remarkList.remarks" :key="index">
                        <span :class="{first: remarkIndex == 0, last: remarkIndex == item.length - 1, choosed: remarkText[index]&&(remarkText[index][0] == remarkIndex)}" class="remark_item_li" v-for="(remarkTtem, remarkIndex) in item" :key="remarkIndex" @click="chooseRemark(index, remarkIndex, remarkTtem)">{{remarkTtem}}</span>
                    </li>
                </ul>
            </section>
            <section class="input_remark quick_remark">
                <header class="header_style">其他备注</header>
                <textarea class="input_text" v-model="inputText" placeholder="请输入备注内容(可不填)"></textarea>
            </section>
            <div class="determine" @click="confirmRemark">确定</div>
        </section>
  </div>
</template>
<script>
// 模拟数据
const remarkList = {"remarks":[["不要辣","少点辣","多点辣"],["不要香菜"],["不要洋葱"],["多点醋"],["多点葱"],["去冰","少冰"]]}
import {XHeader} from 'vux'
import { mapMutations } from 'vuex'
export default {
  components: {
    XHeader
  },
  data () {
    return {
      remarkList: remarkList,
      remarkText: {},
      inputText: null,
    }
  },
  methods: {
    ...mapMutations([
      'CONFIRM_REMARK'
    ]),
    //选择备注
    chooseRemark(index, remarkIndex, text){
      this.remarkText[index] = [remarkIndex, text]
      this.remarkText = Object.assign({}, this.remarkText)
    },
    //确认选择
    confirmRemark(){
      this.CONFIRM_REMARK({remarkText: this.remarkText, inputText: this.inputText})
      this.$router.go(-1);
    }
  }
}
</script>
<style scoped>
.rating_page .vux-header{
  background-color: #fff !important;
}
.header_style{font-size:.65rem;color:#000;line-height:1.5rem;text-align: left;
}
.quick_remark{background-color:#fff;margin-top:.4rem;padding:0 .6rem 1rem
}
.quick_remark ul{display:-webkit-flex;display:flex;flex-wrap:wrap
}
.quick_remark ul li{margin-right:.4rem;margin-bottom:.4rem
}
.quick_remark ul li span{font-size:.46rem;color:#333;padding:.3rem .4rem;border:0.025rem solid #2e9671;border-left:0
}
.quick_remark ul li .first{border-left:0.025rem solid #2e9671;border-top-left-radius:.2rem;border-bottom-left-radius:.2rem
}
.quick_remark ul li .last{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem
}
.quick_remark ul li .choosed{color:#fff;background-color:#2e9671
}
.input_remark{background-color:#fff
}
.input_remark .input_text{width:95%;background-color:#f9f9f9;border:0.025rem solid #eee;resize:none;min-height:4.5rem;border-radius:.2rem;font-size:.46rem;color:#666;padding:.2rem;
}
.determine{background-color:#2e9671;font-size:.6rem;color:#fff;text-align:center;margin:0 .6rem;line-height:1.3rem;border-radius:0.2rem
}
</style>
